<template>
  <div class="content">
    <zx-form-group :title='$t("APPLICATION_DESCRIPTION")'>
      <zx-input type='textarea' v-model='desc' :place='$t("APPLICATION_DESCRIPTION_PLACE")'></zx-input>
    </zx-form-group>
    <div class="form-file">
      <div class="form-input-file imgHandSrc">
        <img src="" alt="" id="imgHandSrc">
        <input type="file" @change="changeFile($event,'imgHandSrc','imgHand')" id="imgHand">
      </div>
      <div class="form-input-text" @click="uploadFIle('imgHand')">{{'UPLOAD_PIC'|t}}</div>
    </div>
    <zx-form-group>
      <input type="submit" class="submit-btn mt-20 green-btn" :value="$t('CONFIRM_THE_STATEMENT')" @click="submitForm()">
    </zx-form-group>
  </div>
</template>
<script>
  import { Form, Func, Auth } from '@/providers';
  import { C2c, Coins } from '@/services';
  export default {
    data() {
      return {
        desc: '',
        imgHand: ''
      };
    },
    methods: {
      async submitForm() {
        if (!this.desc) {
          Form.Totas('APPLICATION_DESCRIPTION_PLACE');
          return false;
        }
        if (!this.imgHand) {
          Form.Totas('UPLOAD_PIC');
          return false;
        }
        let parmas = new FormData();
        let _query = this.$route.query;
        parmas.append('buyUserNo', _query.buyUserNo);
        parmas.append('type', _query.type);
        parmas.append('sellUserNo', _query.sellUserNo);
        parmas.append('dealNo', _query.dealNo);
        parmas.append('usreNo', Auth.getItem('userId'));
        parmas.append('token', Auth.getItem('token'));
        parmas.append('remark', this.desc);
        parmas.append('disputePhone', this.imgHand);
        try {
          let res = await C2c.AddSpotDispute(parmas);
          console.log(res);
          Form.Totas(res.desc, () => {
            this.$router.push({ path: '/manage/order', query: { type: 2 } });
          });
        } catch (error) {
          console.log(error);
        }
      },
      // 文件上传
      changeFile($event, type, formInputValue) {
        var input = $event.target;
        var files = $event.target.files[0];
        var pattern = /image\/(jpg|jpeg|png|JPG|PNG)$/;
        if (!pattern.test(files.type)) {
          Form.Totas('ERROR_PIC');
          return false;
        }
        if (files.size > 5 * 1024 * 1024) {
          Form.Totas('PIC_MAX_SIZE!');
          return false;
        }
        var reader = new FileReader();
        reader.onload = () => {
          var dataURL = reader.result;
          var output = document.getElementById(type);
          output['src'] = dataURL;
        };
        reader.readAsDataURL(files);
        this[formInputValue] = input.files[0];
      },
      // 点击上传文件
      uploadFIle(id) {
        document.getElementById(id).click();
      }
    },
    created() {

    }
  };
</script>
<style scoped lang='scss'>
  .content {
    padding: 50px 0rem;
  }

  @import "../../assets/sass/user.scss";
  .form-input-file img {
    height: 100%;
    width: 100%;
  }

  .imgHandSrc {
    background: RGBA(206, 213, 241, 1) url("../../assets/img/Bitmap1.png") center center no-repeat;
  }

  .imgFaceSrc {
    background: RGBA(206, 213, 241, 1) url("../../assets/img/Bitmap2.png") center center no-repeat;
  }

  .imgBackSrc {
    background: RGBA(206, 213, 241, 1) url("../../assets/img/Bitmap3.png") center center no-repeat;
  }
</style>